<template>
	<view class="form-content">
		<template v-for="item in configs">
			<view class="form-item flex-row" :key="item.prop">
				<text class="form-label">{{item.label}}：</text>
				<slot v-if="item.slot" :name="item.slot"></slot>
				<input v-else :disabled="item.disabled" :placeholder="item.placeholder || `请输入${item.label}`" v-model="form[item.prop]"
					type="text" :maxlength="item.maxlength">
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Object,
				default: () => ({})
			},
			configs: {
				type: Array,
				default: () => ([])
			},
		},
		data() {
			return {
				form: {}
			}
		},
		watch: {
			form: {
				deep: true,
				handler() {
					this.$emit('input', this.form);
				}
			}
		},
		created() {
			this.form = JSON.parse(JSON.stringify(this.value));
		}
	}
</script>

<style scoped lang="scss">
	.form-content {
		text-align: left;

		.form-item {
			border-bottom: 1px solid #fafafa;
			margin-bottom: 70rpx;
			padding: 21rpx 0;

			.uni-input-placeholder {
				font-size: 32rpx;
				color: #ccc;
			}
		}

		.form-label {
			width: 153rpx;
			white-space: nowrap;
			color: #333;
			font-size: 32rpx;
		}
	}
</style>